.alfresco-upload-UploadMonitor {
   box-sizing: border-box;
   min-height: 20px;
   overflow: hidden;
   * {
      box-sizing: inherit;
   }
   &__items {
      border-spacing: 0;
      position: relative;
      table-layout: fixed;
      width: 100%;
      td {
         padding: 0;
      }
   }
   &__item-heading {
      font-size: 0;
   }
   &__item {
      line-height: @upload-monitor-item-line-height;
      > * {
         border-top: @upload-monitor-item-separator-border;
         vertical-align: top;
         &:first-child {
            padding-left: @upload-monitor-item-padding-left;
         }
         &:last-child {
            padding-right: @upload-monitor-item-padding-right;
         }
      }
      &__name {
         &__content {
            margin-right: 20px;
         }
      }
      &__progress {
         width: @upload-monitor-progress-column-width;
      }
      &__status {
         width: @upload-monitor-status-column-width;
         &__inprogress, &__finishing, &__successful, &__unsuccessful, &__unsuccessful_icon {
            display: none;
         }
         &__inprogress {
            color: @upload-monitor-status-color-inprogress;
         }
         &__finishing {
            color: @upload-monitor-status-color-finishing;
         }
         &__successful {
            color: @upload-monitor-status-color-successful;
         }
         &__unsuccessful {
            color: @upload-monitor-status-color-unsuccessful;
         }
      }
      &__actions {
         width: 30px;
         .alfresco-renderers-PublishAction .image {
            vertical-align: text-bottom;
         }
      }
      &__action {
         display: none;
      }
      &__progress-cell {
         font-size: 0;
         padding: 0;
      }
      &__progress-bar {
         background: @upload-monitor-progress-bar-background;
         box-shadow: @upload-monitor-progress-bar-box-shadow;
         height: @upload-monitor-progress-bar-height;
         transition: width .3s ease;
         width: 0;
      }
   }
   &__inprogress-items {
      .alfresco-upload-UploadMonitor {
         &__item {
            &__status__inprogress {
               display: inline;
            }
            &__action__inprogress {
               display: inline-block;
            }
            &--finishing {
               .alfresco-upload-UploadMonitor {
                  &__item__status {
                     &__inprogress {
                        display: none;
                     }
                     &__finishing {
                        display: inline-block;
                     }
                  }
               }
               + tr {
                  .alfresco-upload-UploadMonitor {
                     &__item__progress-bar {
                        background: @upload-monitor-progress-bar-finishing-background;
                     }
                  }
               }
            }
         }
      }
   }
   &__successful-items {
      .alfresco-upload-UploadMonitor {
         &__item {
            &__progress {
               &__content {
                  display: none;
               }
            }
            &__status__successful {
               display: inline;
            }
            &__action__successful {
               display: inline-block;
            }
         }
      }
   }
   &__unsuccessful-items {
      .alfresco-upload-UploadMonitor {
         &__item {
            &__status__unsuccessful {
               display: inline;
            }
            &__action__unsuccessful {
               display: inline-block;
            }
            &__status__unsuccessful_icon {
               display: inline-block;
               margin-left: 10px;
            }
         }
      }
   }
   &--use-ellipsis {
      .alfresco-upload-UploadMonitor {
         &__item {
            &__name {
               &__content {
                  direction: rtl;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  unicode-bidi: bidi-override;
                  white-space: nowrap;
                  text-align: left;
               }
            }
         }
      }
   }
}
